<script setup lang="ts">
import { Delete, Edit } from '@element-plus/icons-vue'
import type { ApplicationModel } from '@/types/modules/application-models'

withDefaults(
  defineProps<{
    loading: boolean
    lists: ApplicationModel[]
  }>(),
  {},
)

const emits = defineEmits<{
  (e: 'edit', row: ApplicationModel): void
  (e: 'delete', row: ApplicationModel): void
}>()
</script>

<template>
  <ElTable
    ref="tableRef"
    v-loading="loading"
    element-loading-custom-class="global-loading"
    :data="lists"
    height="100%"
    style="width: 100%;"
    row-key="id"
    default-expand-all
    border
  >
    <template #empty>
      <TableEmpty text="选择应用模型查看节点" />
    </template>
    <ElTableColumn
      label="节点名称"
      prop="name"
      show-overflow-tooltip
      align="left"
    />
    <ElTableColumn label="操作" prop="id">
      <template #default="{ row }">
        <TdButton
          title="编辑"
          :icon="Edit"
          type="primary"
          @click="emits('edit', row)"
        />
        <el-divider direction="vertical" />
        <TdButton
          title="删除"
          :icon="Delete"
          type="danger"
          @click="emits('delete', row)"
        />
      </template>
    </ElTableColumn>
  </ElTable>
</template>
